<style lang="less">
	.top_head {
		height: 340rpx;
		width: 100%;
		padding: 0 30rpx;
		background: linear-gradient(to right, #5CACEE, #64BFFD, #89bee8);
	}

	.icon-say {
		font-size: 28rpx;
		color: #fff;
	}

	.first_line {
		padding: 40rpx 0 0 0;
	}

	.my_info {
		&>image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			border: 2px solid #fff;
		}

		.info_name {
			margin: 0 0 0 20rpx;
			letter-spacing: 1rpx;
			display: flex;
			flex-direction: column;
			flex: 1;

			&>view:first-child {
				font-size: 30rpx;
				font-weight: bold;
				color: #fff;
				margin: 0 0 20rpx;
			}

			&>view:last-child {
				font-size: 25rpx;
				color: #fff;
			}
		}
	}

	.icon-right {
		font-size: 28rpx;
	}

	.sign {
		background: #EEDC82;
		font-size: 25rpx;
		padding: 5rpx 0;
		color: #8B4513;
		border-radius: 20rpx;
		width: 100rpx;
		margin: 0 0 5rpx;
	}

	.flex_coum_center>text {
		font-size: 22rpx;
		color: #fff;
	}
	.nav_line{
		width: 92vw;
		/* background: #fff; */
		color: #fff;
		margin: 0 auto 0;
		border-radius: 5px;
		padding: 20rpx 0 0 20rpx;
		position: relative;
		&>view{
			width: 27%;
			&>text:first-child{
				font-size: 45rpx;
				// padding: 0 0 0 5rpx;
				color: #fff;
				font-weight: 500;
			}
			&>text:last-child{
				font-size: 22rpx;
				color: #fff;
			}
			&:last-child{
				display: flex;
				flex-direction: column;
				flex: 1;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.icon-wallent{
		font-size: 40rpx;
		color: #5ab3ff;
	}
	.nav_title{
		width: 92vw;
		background: #fff;
		margin: 20rpx auto 0;
		padding: 35rpx 0;
		border-radius: 10rpx;
		&>view{
			width: 25%;
			&>i{
				font-size: 42rpx;
				color: #5ab3ff;
				margin: 0 0 10rpx;
			}
			&>text{
				color: #999999;
				letter-spacing: 1rpx;
			}
		}
	}
	.swiper_css{
		width: 92vw;
		height: 150rpx;
		margin: 20rpx auto;
		border-radius: 10rpx;
	}
	.list_item{
		width: 92vw;
		background: #fff;
		margin: 20rpx auto 0;
		border-radius: 10rpx;
		&>view{
			height: 90rpx;
			padding: 0 30rpx;
			border-bottom: 1px solid rgba(0,0,0,0.05);
			font-size: 25rpx;
			color: #444;
			letter-spacing: 1rpx;
		}
		&>view:last-child{
			border: 0;
		}
	}
	.right-t-1{
		font-size: 26rpx;
		color: #999;
	}
	.right-t-2{
		color: #F3404F;
		font-size: 25rpx;
		margin: 0 10rpx;
	}
	.icon-coin{
		color: #EEDC82;
		font-size: 30rpx;
		margin: 0 10rpx 0 0;
	}
	.code_toast{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background: rgba(0,0,0,0.3);
		.conten{
			width: 75%;
			background: #fff;
			border-radius: 15rpx;
			// height: auto;
		animation: shows 0.5s;
			
			padding: 40rpx;
			// box-sizing: content-box;
			// position: fixed;
			// top: 0;
			// left: 0;
			// right: 0;
			// bottom: 0;
			margin: auto;
			text,view{
				overflow: hidden;
				white-space: nowrap;
			}
			.title{
				font-weight: 500;
				font-size: 30rpx;
				color: #333;
				&::before{
					content: '';
					display: inline-block;
					width: 15rpx;
					height: 15rpx;
					border: 1px solid #F3404F;
					border-radius: 50%;
					margin: 5rpx 30rpx 0 0;
				}
				&::after{
					content: '';
					display: inline-block;
					width: 15rpx;
					height: 15rpx;
					border: 1px solid #F3404F;
					border-radius: 50%;
					margin-left: 30rpx;
					margin-top: 5rpx;
				}
			}
			.title-1{
				font-size: 26rpx;
				color: #999;
				margin: 20rpx 0 0;
				letter-spacing: 1px;
			}
			&>input{
				width: 90%;
				height: 80rpx;
				margin: 45rpx auto 30rpx;
				border-radius: 50rpx;
				border: 1px solid #ccc;
				text-align: center;
			}
			.bbb{
				width: 90%;
				height: 70rpx;
				background: #F3404F;
				border-radius: 50rpx;
				color: #fff;
				font-size: 26rpx;
				letter-spacing: 1px;
				margin: 0 auto;
			}
		}
	}
	@keyframes shows{
		from{
			opacity: 0;
		}to{
			opacity: 1;
		}
	}
	.copyright{
		text-align: center;
		font-size: 24upx;
		color: #999;
		line-height: 40upx;
	}
	.content{
		height: 100vh;
		background: #F2F2F2;
		display: flex;
		flex-direction: column;
		padding-bottom: 150upx;
	}
	.box{
		flex: 1;
	}
</style>

<template>
	<view class="content">
	<view class="box">
		<view class="code_toast flex_center" v-if="showCode" @click="showCodeM">
			<view class="conten" @click.stop>
				<view class="title flex_center">
					填写邀请码
				</view>
				<view class="title-1 flex_center">
					填写好友邀请码,立得<text style="color: #F3404F;">2.00元</text>奖励
				</view>
				<input type="text" value="" placeholder-style="font-size:26rpx;color:#ccc" placeholder="输入邀请码(向介绍人索取)"/>
				<view class="bbb flex_center">
					提交邀请码
				</view>
			</view>
		</view>
			<view class="" :style="'height:' + statusBarHeight +'px'" ></view>
		<view class="top_head">
			<view class="first_line flex_r_end">
				<!-- <i class='iconfont icon-say'></i> -->
			</view>
			<view class="my_info flex_v_venter">
				<image :src="userInfo.avatar ? userInfo.avatar : '../../static/img/cat.jpg'" mode=""></image>
				<view class="info_name" @click="infoClickHandle">
					<view class="">
						{{ isLogin ? userInfo.nickname : '未登录'}}
					</view>
					<view class="flex_v_venter">
						<text>{{isLogin ? userInfo.mobile || '手机号未绑定' : '点击登录'}}</text>
						<!-- <i class='iconfont icon-right'></i> -->
					</view>
				</view>
				<view class="info_right flex_coum_center" @click="navDetail('./sign')">
					<view class="sign flex_center" @click="">
						{{userInfo.isTodaySign ? '已签到' : '未签到'}}
					</view>
				</view>
			</view>
		<view class="nav_line flex_v_venter">
			<view class="flex_coum_center" style="align-items: flex-start;">
				<text>{{userInfo.gold || 0}}</text>
				<text>剩余收益(金币)</text>
			</view>
			<!-- <view class="flex_coum_center">
				<text>0</text>
				<text>今日金币</text>
			</view>
			<view class="flex_coum_center">
				<text>0</text>
				<text>今日阅读(分钟)</text>
			</view>
			<view class="flex_coum_center">
				<i class='iconfont icon-wallent'></i>
				<text>查看钱包</text>
			</view> -->
		</view>
		</view>
		<view class="nav_title flex_r_around">
			<!-- <view class="flex_coum_center">
				<i class='iconfont icon-face'></i>
				<text>面对面红包</text>
			</view> -->
			<view class="flex_coum_center" @click="$go('./get-detail')">
				<i class='iconfont icon-jl'></i>
				<text>收益明细</text>
			</view>
			<view class="flex_coum_center" @click="taskHandle">
				<i class='iconfont icon-add'></i>
				<text>邀请好友</text>
			</view>
			<view class="flex_coum_center" @click="withdraw">
				<i class='iconfont icon-hb'></i>
				<text>兑换提现</text>
			</view>
		</view>
<!-- <<<<<<< HEAD -->
		<!-- <swiper class="swiper_css" :indicator-dots="true" indicator-color='#1890FF' :autoplay="true" :interval="3000" :duration="1000">
=======
		<swiper class="swiper_css" :indicator-dots="true" indicator-color='#5ab3ff' :autoplay="true" :interval="3000" :duration="1000">
>>>>>>> 0b094fdc8f701f9a995304da09e2bf09384968c3
			<swiper-item v-for="item in 3" :key='item'>
				<image style="width: 100%;height: 100%;border-radius: 10rpx;" src="../../static/img/cat.jpg" mode=""></image>
			</swiper-item>
		</swiper> -->
		<!-- <view class="nav_title flex_v_venter">
			<view class="flex_coum_center" @click="navDetail('./my-follow')">
				<i class='iconfont icon-follow' style='color: #333;'></i>
				<text>我的关注</text>
			</view>
			<view class="flex_coum_center" @click="navDetail('./my-comment')">
				<i class='iconfont icon-pl' style='color: #333;'></i>
				<text>我的评论</text>
			</view>
			<view class="flex_coum_center" @click="navDetail('./my-collection')">
				<i class='iconfont icon-sc' style='color: #333;'></i>
				<text>我的收藏</text>
			</view>
			<view class="flex_coum_center" @click="navDetail('./my-follow')">
				<i class='iconfont icon-jl' style='color: #333;'></i>
				<text>历史记录</text>
			</view>
		</view> -->
		<view class="list_item">
			<view class="flex_r_between" @click="showCodeM">
				<text>填写邀请码</text>
				<view class="flex_v_venter right-t">
					<view class="flex_v_venter">
						<!-- <text class="right-t-1">每日限时领取</text> -->
						<text class="right-t-2">+20000</text>
						<i class='iconfont icon-coin'></i>
					</view>
					<i class='iconfont icon-right'></i>
				</view>
			</view>
			<view class="flex_r_between" v-if='isLogin' @click="copyInviteCode">
				<text>我的邀请码</text>
				<view class="flex_v_venter right-t">
					<view class="flex_v_venter">
						<!-- <text class="right-t-1">每日限时领取</text> -->
						<text class="right-t-2">{{$store.state.userInfo.inviteCode || ''}}</text>
					</view>
					<i class='iconfont icon-right'></i>
				</view>
			</view>
			<!-- <view class="flex_r_between" @click="$go('./my_message')">
				<text>我的消息</text>
				<i class='iconfont icon-right'></i>
			</view> -->
			<!-- <view class="flex_r_between">
				<text>广场舞大赛</text>
				<i class='iconfont icon-right'></i>
			</view>
			<view class="flex_r_between">
				<text>帮助与反馈</text>
				<i class='iconfont icon-right'></i>
			</view>
			<view class="flex_r_between">
				<text>设置</text>
				<i class='iconfont icon-right'></i>
			</view> -->
			<view class="flex_r_between" v-if='showRecharge' @click="navDetail('/pages/me/recharge')">
				<text>去充值</text>
				<i class='iconfont icon-right'></i>
			</view>
			<view class="flex_r_between" @click="navDetail('/pages/me/aboutUs')">
				<text>关于我们</text>
				<i class='iconfont icon-right'></i>
			</view>
		</view>
		
	</view>
	<!-- <view class="copyright">Copyright&copy;2020<br>成都十度新一科技有限公司版权所有</view> -->
	</view>
</template>

<script>
	export default {
		computed:{
			showRecharge () {
				return this.isLogin && this.$store.state.config.openCharge === '1'
			}
		},
		data() {
			return {
				userInfo:{},
				showCode:false,
				isLogin: false
			};
		},
		methods:{
			withdraw () {
				if (!this.isLogin) {
					this.navDetail('/appIn/appIn')
					return
				}
				if (this.$store.state.config.openWithdraw === '0') {
					this.navDetail('./kf')
				} else {
					this.navDetail('./getMoney?account=' + this.userInfo.alipayAccount)
				}
			},
			copyInviteCode() {
				uni.setClipboardData({
					data: this.$store.state.userInfo.inviteCode,
					success() {
						uni.showToast({
							icon: 'success',
							title: '复制成功～'
						})
					}
				})
			},
			infoClickHandle() {
				if (this.isLogin) {
					this.navDetail('../appIn/appIn?bind=tel&bindModel=1')
				} else {
					this.navDetail('../appIn/appIn')			
				}
			},
			navDetail(url){
				uni.navigateTo({
					url:url
				})
			},
			taskHandle (task) {
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 0,
					href: this.$store.state.config.shareUrl,
					title: "快来和我一起看新闻赚钱吧～",
					summary: "点击链接下载并登陆之后填写我的邀请码，马上赚钱～",
					imageUrl: this.$store.state.config.shareImgUrl || '',
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					}
				})
			},
			showCodeM() {
				this.showCode = !this.showCode
			},
			getInfo() {
				this.$ajax('/user/getUserInfo','','get').then(res => {
					this.userInfo = res.data.obj
					this.$store.commit('setUser',this.userInfo)
					this.isLogin = !!(this.userInfo.openId || this.userInfo.mobile)
				})
			}
		},
		onShow() {
			this.getInfo()
		}
	}
</script>
